<template>
  <!-- <el-row :gutter="20"> -->
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-if="config.type == 'input'">
    <el-form-item :label="config.label" :prop="config.value">
      <el-input :disabled="config.disabled" v-model="formData[config.value]" :placeholder="config.placeholder || '请输入'"></el-input>
    </el-form-item>
  </el-col>
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-else-if="config.type == 'textarea'">
    <el-form-item :label="config.label" :prop="config.value">
      <el-input
        clearable
        type="textarea"
        show-word-limit
        :disabled="config.disabled"
        v-model="formData[config.value]"
        :maxlength="config.maxlength || 500"
        :autosize="config.autosize || { minRows: 3, maxRows: 5 }"
        :placeholder="config.placeholder || '请输入'"
      ></el-input>
    </el-form-item>
  </el-col>
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-else-if="config.type == 'select'">
    <el-form-item :label="config.label" :prop="config.value">
      <el-select
        clearable
        filterable
        collapse-tags
        :disabled="config.disabled"
        v-model="formData[config.value]"
        :multiple="config.multiple || false"
        :placeholder="config.placeholder || '请选择'"
      >
        <el-option v-for="item in config.options" :key="item.id" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-else-if="config.type == 'number'">
    <el-form-item :label="config.label" :prop="config.value">
      <el-input-number
        :disabled="config.disabled"
        v-model="formData[config.value]"
        :placeholder="config.placeholder || '请输入'"
        :min="config.min || -Infinity"
        :max="config.max || Infinity"
        :controls="config.controls || true"
      ></el-input-number>
    </el-form-item>
  </el-col>
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-else-if="config.type == 'cascader'">
    <el-form-item :label="config.label" :prop="config.value">
      <el-cascader
        clearable
        collapse-tags
        filterable
        :props="{ emitPath: config.emitPath || false, checkStrictly: config.checkStrictly || false }"
        :disabled="config.disabled"
        v-model="formData[config.value]"
        :options="config.options || []"
        :placeholder="config.placeholder || '请选择'"
      ></el-cascader>
    </el-form-item>
  </el-col>
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-else-if="datePickerList.includes(config.type)">
    <el-form-item :label="config.label" :prop="config.value">
      <el-date-picker
        :disabled="config.disabled"
        v-model="formData[config.value]"
        :type="config.type"
        :format="config.format || 'YYYY-MM-DD'"
        :value-format="config.vFormat || 'YYYY-MM-DD'"
        :disabledDate="config.disabledDate || empty"
        :placeholder="config.placeholder || '请选择'"
      ></el-date-picker>
    </el-form-item>
  </el-col>
  <el-col :xs="fit.xs" :sm="fit.sm" :md="fit.md" :lg="fit.lg" :xl="fit.xl" v-else-if="config.type == 'time'">
    <el-form-item :label="config.label" :prop="config.value">
      <el-time-picker :disabled="config.disabled" v-model="formData[config.value]" :placeholder="config.placeholder || '请选择'"></el-time-picker>
    </el-form-item>
  </el-col>
  <!-- </el-row> -->
</template>
<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'c-formitems',
  props: {
    config: {
      type: Object,
      require: true,
    },
    'form-data': {
      type: Object,
      require: true,
    },
  },
  setup() {
    const { proxy } = getCurrentInstance()
    const fit = Object.assign(
      {
        xs: { span: 12 }, // <768px 响应式栅格数或者栅格属性对象
        sm: { span: 12 }, // ≥768px 响应式栅格数或者栅格属性对象
        md: { span: 8 }, // ≥992px 响应式栅格数或者栅格属性对象
        lg: { span: 8 }, // ≥1200px 响应式栅格数或者栅格属性对象
        xl: { span: 8 }, // ≥1920px 响应式栅格数或者栅格属性对象
      },
      proxy.config,
    )
    const datePickerList = ['year', 'month', 'date', 'dates', 'week', 'datetime', 'datetimerange', 'daterange', 'monthrange']
    function empty() {}

    return { fit, datePickerList, empty }
  },
}
</script>
